<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<%--
  Created by IntelliJ IDEA.
  User: oldliu
  Date: 2022/8/25
  Time: 16:29
  To change this template use File | Settings | File Templates.
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
    <title>Title</title>
    <script src="js/jquery-3.4.1.min.js"></script>
    <script>
        $(function () {
            $(".deloption").click(function () {
                $(".options:last").remove();
                //删除答案部分的最后一个span
                $("#answers span:last").remove();
            });
            //选中单选和多选
            $("select[name=difficulty]").val('${q.difficulty}');
            $("select[name=examskillid]").val('${q.examskillid}');
            //选中答案：
            let ans='${q.answers}';
            let ar=ans.split(",");
            for(let a of ar){
                $(":checkbox[name=answers][value='"+a+"']").prop("checked",true);
            }
            $("form").submit(function () {
                //必须要选择一个答案:
                let a = $("#answers :checkbox:checked");

                if (a.length==0){
                    alert("您没有选择答案！");
                    return false;
                }
                return true;
            });
        });
    </script>
</head>
<body>
  <h2>新增题目</h2>
  <form action="update.ques" method="post" enctype="multipart/form-data">
      <input type="hidden" name="id" value="${q.id}"/>
      <p>
        题目:<textarea name="title" required><c:out value="${q.title}"/></textarea>
      </p>
      <p class="options">
        <ol type="A">
          <c:forEach items="${q.options}" var="op">
              <li>
            <pre>
                   <textarea name="options"> <c:out value="${op}"/></textarea>
            </pre>
              </li>
          </c:forEach>
      </ol>
      </p>
      <p id="answers">答案:
        <span><input type="checkbox" name="answers" value="0"/>A </span>
        <span><input type="checkbox" name="answers" value="1"/>B </span>
        <span><input type="checkbox" name="answers" value="2"/>C </span>
        <span><input type="checkbox" name="answers" value="3"/>D </span>
      </p>
        <p>
            分值:<input type="number" value="${q.degree}" name="degree" min="1" max="10" value="1"/>
            难度:
            <select name="difficulty">
                <option value="1">容易</option>
                <option value="2">难</option>
                <option value="3">较难</option>
            </select>

            权重:<input type="number" value="${q.weight}" name="weight"  min="1" max="10" value="1"/>

        </p>
      <p>
          知识点:
          <select name="examskillid">
           <c:forEach items="${sections}" var="s">
               <optgroup label="${s.sectionname}">
                   <c:forEach items="${s.children}" var="s2">
                       <option value="${s2.id}">${s2.sectionname}</option>
                   </c:forEach>
               </optgroup>
           </c:forEach>
          </select>

      </p>
      <p>
          解析:<textarea name="questionanalysis" cols="50" row="8"><c:out value="${q.questionanalysis}"/></textarea>
      </p>
      <p>
          图片:<input type="file" name="picture" onchange="previewFile(this)"><br/>
          <img id="preview" src="${q.pictBase64}" alt="" height="300px" width="400px"/>
      </p>
      <p>
          <button>提交</button>
          <button type="reset">重写</button>
      </p>
  </form>
  <script>
      function previewFile(f) {
          var preview = document.querySelector('#preview');
          var file  = f.files[0];
          var reader = new FileReader();
          reader.onloadend = function () {
              preview.src = reader.result;
          }
          if (file) {
              reader.readAsDataURL(file);
          } else {
              preview.src = "";
          }
      }
    </script>
</body>
</html>
